<template>
  <div class="testee">
    <div class="header">
      <div class="left">
        <div class="title">测试人员</div>
        <div class="button">
          <el-button icon="el-icon-plus" @click="add">添加</el-button>
          <!-- <el-button icon="el-icon-edit">编辑</el-button> -->
          <el-button icon="el-icon-delete" @click="removeAll">删除</el-button>
        </div>
      </div>
      <div class="right">
        <search-input @searchResult="search"></search-input>
      </div>
    </div>
    <div class="container">
      <el-table
        ref="tableData"
        :data="tableData"
        style="width: 100%"
        max-height="500"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"> </el-table-column>
        <el-table-column prop="id" label="用户ID" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column
          prop="height"
          label="身高"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="weight"
          label="体重"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="出生日期"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="hometown"
          label="籍贯"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="career"
          label="职业"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- <i
              class="el-icon-key"
              style="margin-right: 16px;font-size: 24px;color: #365EFF;cursor: pointer;"
              @click="setRule(scope.row)"
            ></i> -->
            <i
              class="el-icon-edit"
              style="
                margin-right: 16px;
                font-size: 24px;
                color: #365eff;
                cursor: pointer;
              "
              @click="edit(scope.row)"
            ></i>
            <i
              class="el-icon-delete"
              style="font-size: 24px; color: red; cursor: pointer"
              @click="remove(scope.row.id)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <Pagination :total="total" @pagination="onPaginationChange"></Pagination>
    </div>
    <transition name="el-fade-in-linear">
      <div v-if="maskShow" class="transition-box mask">
        <div :class="flag ? 'form' : 'form top'">
          <div class="title">
            {{ flag ? (editFlag ? "修改用户" : "添加用户") : "设置权限" }}
          </div>
          <div class="addForm" v-if="flag">
            <el-form
              ref="addForm"
              label-position="top"
              label-width="80px"
              :model="addForm"
              :rules="addFormRules"
            >
              <el-form-item label="用户ID" prop="id">
                <el-input
                  v-model="addForm.id"
                  placeholder="请输入用户ID"
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="addForm.name"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="身高(cm)" prop="height">
                <el-input
                  v-model="addForm.height"
                  placeholder="请输入身高"
                ></el-input>
              </el-form-item>
              <el-form-item label="体重(kg)" prop="weight">
                <el-input
                  v-model="addForm.weight"
                  placeholder="请输入体重"
                ></el-input>
              </el-form-item>
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  v-model="addForm.birthday"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="籍贯" prop="hometown">
                <el-input
                  v-model="addForm.hometown"
                  placeholder="请输入籍贯"
                ></el-input>
              </el-form-item>
              <el-form-item label="职业" prop="career">
                <el-input
                  v-model="addForm.career"
                  placeholder="请输入职业"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- <div
            class="set"
            v-else
          >
            <el-form
              ref="setForm"
              label-position="top"
              label-width="80px"
              :model="setForm"
              :rules="setFormRules"
            >
              <el-form-item
                label="用户ID"
                prop="id"
              >
                <el-input
                  v-model="setForm.type"
                  placeholder="请输入用户ID"
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-checkbox-group v-model="setForm.auth">
                  <el-checkbox label="权限1"></el-checkbox>
                  <el-checkbox label="权限2"></el-checkbox>
                  <el-checkbox label="权限3"></el-checkbox>
                  <el-checkbox label="权限4"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div> -->
          <div class="button">
            <el-button type="info" @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </transition>

    <success-tip v-if="success" :text="text"></success-tip>
  </div>
</template>

<script>
import { testeeList, testeeAdd, testeeUpdate, userDelete } from "@/api/user";
export default {
  name: "Testee",
  data() {
    return {
      text: "保存成功",
      maskShow: false,
      flag: true,
      editFlag: false,
      addForm: {
        id: "",
        name: "",
        height: "",
        weight: "",
        birthday: "",
        hometown: "",
        career: "",
      },
      setForm: {
        type: "被测人员",
        auth: [],
      },
      success: false,
      tableData: [],
      total: 0,
      ids: [],
      searchData: {
        keyword: "",
        pageSize: 10,
        pageNum: 1,
      },
      addFormRules: {
        id: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        height: [{ required: true, message: "请输入身高", trigger: "blur" }],
        weight: [{ required: true, message: "请输入体重", trigger: "blur" }],
        birthday: [
          { required: true, message: "请选择出生日期", trigger: "blur" },
        ],
        hometown: [{ required: true, message: "请输入籍贯", trigger: "blur" }],
        career: [{ required: true, message: "请输入职业", trigger: "blur" }],
      },
      setFormRules: {
        id: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
      },
    };
  },
  methods: {
    search(val) {
      this.searchData.keyword = val;
      this.getTableData();
    },
    add() {
      this.maskShow = true;
      this.flag = true;
      this.editFlag = false;
    },
    save() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          if (this.flag) {
            const submitFunction = this.editFlag ? testeeUpdate : testeeAdd;
            submitFunction(this.addForm).then((res) => {
              this.getTableData();
              this.successTip(this, this.editFlag ? "修改成功" : "添加成功");
            });
          }
          this.resetForm(this, "addForm");
          this.maskShow = false;
        } else {
          return false;
        }
      });
    },
    setRule() {
      this.maskShow = true;
      this.flag = false;
      this.editFlag = false;
    },
    edit(data) {
      this.maskShow = true;
      this.editFlag = true;
      this.addForm = {
        id: data.id,
        name: data.name,
        height: data.height,
        weight: data.weight,
        birthday: data.birthday,
        hometown: data.hometown,
        career: data.career,
      };
    },
    remove(id) {
      this.ids.push(id);
      this.deleteByIds();
      this.ids = [];
    },
    removeAll() {
      this.deleteByIds();
    },
    deleteByIds() {
      userDelete({ ids: this.ids }).then((res) => {
        this.getTableData();
        this.successTip(this, "删除成功");
      });
    },
    cancel() {
      this.maskShow = false;
      this.flag = true;
      this.resetForm(this, "addForm");
    },
    handleSelectionChange(val) {
      this.ids = [];
      for (let key in val) {
        this.ids.push(val[key].id);
      }
    },
    onPaginationChange({ page, limit }) {
      this.searchData.pageNum = page;
      this.getTableData();
    },
    async getTableData() {
      await testeeList(this.searchData)
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.tableData = [];
          this.total = 0;
        });
    },
    resetForm() {
      for (let key in this.addForm) {
        this.addForm[key] = "";
      }
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss">
.testee {
  position: relative;
  padding: 36px 42px;

  .header {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        height: 26px;
        line-height: 26px;
        font-size: 26px;
        color: #333333;
      }

      .button {
        margin-top: 36px;
        display: flex;
        height: 48px;

        .el-button {
          padding: 0 28px;
          font-size: 16px;
          font-weight: bold;
          width: 112px;
          border-radius: 12px;
          border: 1px solid #e4e4e4;
        }

        .el-button + .el-button {
          margin-left: 30px;
        }
      }
    }

    .right {
      height: 66px;
      line-height: 66px;
    }
  }

  .container {
    margin-top: 24px;
    width: 100%;
    height: 688px;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);

    .el-table {
      height: 688px;
      max-height: 100% !important;
      font-size: 16px;

      &::before {
        height: 0;
      }

      .el-table__header-wrapper {
        .el-table__header th {
          padding: 0;
          height: 84px;
          line-height: 84px;
          background-color: #f7faff;
          font-size: 18px;
          border: none;
        }
      }

      .el-table__body-wrapper {
        height: 600px;
        max-height: 100% !important;

        tr {
          height: 80px;

          &:hover {
            td.el-table__cell {
              box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
              background: #ffffff;
            }
          }
        }
      }
    }
  }

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.5);

    .form {
      position: absolute;
      top: calc(50% - 297px);
      left: calc(50% - 308px);
      width: 616px;
      background: #ffffff;
      border-radius: 24px;
      overflow: hidden;

      .title {
        margin: 24px;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        font-weight: 500;
        color: #333333;
      }

      .el-form {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 568px;

        .el-form-item {
          margin-bottom: 20px;
          padding: 0 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 274px;
          height: 88px;
          background: #f7f7f7;
          border-radius: 12px;

          .el-form-item__label {
            padding: 0;
            line-height: 14px;
            font-weight: 400;
            color: #666;
          }

          .el-form-item__content {
            height: 20px;
            line-height: 20px;

            .el-input {
              .el-input__inner {
                padding: 0;
                height: 20px;
                width: 100%;
                line-height: 20px;
                border: none;
                border-radius: 0;
                background-color: #f7f7f7;
                font-size: 16px;
                font-weight: 500;
                color: #333;
              }

              .el-input__prefix {
                display: none;
              }

              .el-input__suffix {
                top: -10px;
              }
            }
          }
        }
      }

      .set {
        .el-form-item {
          width: 568px;

          .el-checkbox {
            .el-checkbox__label {
              font-size: 16px;
            }
          }
        }
      }

      .button {
        margin: 10px 0 36px;
        padding: 0 64px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 48px;

        .el-button {
          width: 204px;
          height: 48px;
          border-radius: 12px;
        }
      }
    }

    .top {
      top: calc(50% - 200px);
    }
  }
}
</style>
